<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <script>
        // 获取body标签
        // console.log(document.body);// null
        // 为什么在head标签的script标签编写脚本,获取不到页面可视化标签?
        // 主要页面渲染时,指定的标签还没渲染
        // 需要等html文档的标签渲染完成,然后在去获取元素

        // 监听页面加载完成的事件(onload 仅仅加载一次,否则覆盖)
        // window.onload = function(){
        //     console.log(1);
        //     console.log(document.body,'onloaded');// body标签
        // }
        // window.onload = function(){
        //     console.log(2);
        //     console.log(document.body,'onloaded');// body标签
        // }

    </script>
</head>
<body>

    

    <div class="parent">
        <span class="son-1">1</span>
        <span class="son-2">2</span>
        <span class="son-3">3</span>
    </div>

    <script>
        // document  文档对象
        // console.log(document);   // 打印文档对象
        // console.dir(document);   // 展开文档对象(属性和方法)


        // 属性
        // 通过属性获取标签
        // var html = document.documentElement;console.log(html);// html 标签

        // var head = document.head;console.log(head);// head 标签

        // console.log(document.body);// body 标签

        var childArray =  document.body.children;  console.log(childArray);// 标签数组 body标签的子元素数组
        var childArray = document.body.children; console.log(childArray);

        console.log(document.body.lastElementChild);//  最后一个元素 script
        console.log(document.body.lastElementChild);

        console.log(document.body.firstElementChild);// 第一个子元素 div
        console.log(document.body.firstElementChild);


        // 记录body标签第一个子元素
        var ele = document.body.firstElementChild;console.dir(ele); //通过这种方式可以查看dom对象的API(属性和方法)
        var ele = document.body.firstElementChild;

        // 获取当前标签的父元素
        console.log(ele.parentElement);// body标签
        console.log(ele.parentElement);

        // 获取div的子元素
        var elements = ele.children; console.log(elements);// HTMLCollection(3) [span.son-1, span.son-2, span.son-3]

        // 获取div的第二个子元素
        var second_ele = elements[1]; console.log(second_ele);//<span class="son-2">2</span>
        // console.dir(second_ele);

        // 获取当前标签的上一个元素
        var prev_ele = second_ele.previousElementSibling; console.log(prev_ele);// <span class="son-1">1</span>

        // 获取当前标签的下一个元素
        var next_ele = second_ele.nextElementSibling; console.log(next_ele);// <span class="son-3">3</span>

       
    </script>


</body>
</html>

<!-- 
<script type="text/javascript">
</script> 
-->